<template>
	<view class="notice">
		<view class="left">

			<uni-icons type="sound-filled"></uni-icons>
			<text class="title">公告</text>
		</view>
		<view class="center">
			
			<swiper
				autoplay
				circular
				vertical
				interval="3000"
				duration="300"
			>
				<swiper-item v-for="item in 5">
					<navigator url="/pages/notice/notice">
						<text>这是第{{ item }}条公告</text>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<view class="right">
			
			<uni-icons type="right" size="16" color="#333"></uni-icons>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.notice {
	width: 700rpx;
	height: 80rpx;
	display: flex;
	justify-content: space-between;
	padding: 0 20rpx;
	margin: 0 auto;
	line-height: 80rpx;
	background-color: #f3f3f3;
	border-radius: 40rpx;
	// 公告栏左边
	.left {
		width: 140rpx;
		display: flex;
		align-items: center;
		
		.title {
			margin-left: 5rpx;
			color: #333333;
			font-size: 30rpx;
			font-weight: 600;
		}
	}
	// 公告栏中间
	.center {
		flex: 1;
		swiper {
			height: 100%;
			swiper-item {
				font-size: 30rpx;
				color: #666666;
				overflow: hidden;
				// 文本不换行
				white-space: nowrap;
				// 超长公告显示省略号
				text-overflow: ellipsis;
			}
		}
	}
	// 公告栏右边
	.right {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>

<script>
</script>

<style>
</style>